﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../css/public.css" media="all">
	<script src="../lib/layui/layui.js" charset="utf-8"></script>
	<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<fieldset class="table-search-fieldset" id="searchField">
				<div>
					<form class="layui-form layui-form-pane">
						<div class="layui-form-item">
							<label class="layui-form-label">卡片标题</label>
							<div class="layui-input-inline">
								<input type="text" name="realName"id="realName" placeholder="" class="layui-input">
							</div>
							<label class="layui-form-label">卡片名称</label>
							<div class="layui-input-inline">
								<input type="text" name="username"id="username" placeholder="" class="layui-input">
							</div>
							<div class="layui-inline">
								<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon">&#xe615;</i> 搜 索</button>
								<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon">&#xe615;</i> 获取数据</button>
								<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-checked-btn"><i class="layui-icon">&#xe615;</i> 获取选中数据</button>
							</div>
						</div>
					</form>
				</div>
			</fieldset>
			<table id="currentTableId"></table>
		</div>
	</div>
	<script>
		layui.use(['table','layer', 'form', 'jquery', 'cardTable'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
            let layer = layui.layer;
			let cardTable = layui.cardTable;

			cardTable.render({
				elem: '#currentTableId',
				url: '../json/card.json',
			})
			// 监听搜索操作
			form.on('submit(data-search-btn)', function (data) {
				queryJson = data.field;
				cardTable.reload("currentTableId", {
					where: queryJson,
				});
				return false;
			});
            form.on('submit(data-checked-btn)', function () {
                var data = cardTable.getChecked("currentTableId");
                layer.msg(JSON.stringify(data));
                return false;
            });
			form.on('submit(data-btn)', function () {
				var data = cardTable.getAllData("currentTableId");
                layer.msg(JSON.stringify(data));
				return false;
			});
		})
	</script>
</body>
</html>